<template>
   <el-main>
      <el-row type="flex" justify="center">
         <el-col :span="12" style="text-align: center;">
            <el-form :model="search" ref="searchRef" :inline="true">
               <el-form-item label="图书名称">
                  <el-input v-model="search.bookName" clearable/>
               </el-form-item>
               <el-form-item label="图书类型">
                  <el-select style="width: 200px;" v-model="search.typeCode" filterable clearable>
                     <el-option v-for="item in ddl.typeCodeDdl" :key="item.typeCode" :label="item.typeName"
                                :value="item.typeCode">
                     </el-option>
                  </el-select>
               </el-form-item>
               <el-form-item>
                  <el-button type="primary" icon="Search" @click="mSearchData">搜索</el-button>
               </el-form-item>
            </el-form>
         </el-col>
      </el-row>
      <el-row type="flex" justify="center">
         <el-col :span="18" class="center">
            <div v-for="item in table.data" class="book">
               <div style="height: 40px; line-height: 40px;">
                  图书名称：{{ item.bookName }}
               </div>
               <div style="height: 40px; line-height: 40px;">
                  <div>售价：{{ item.sellPrice }}￥</div>
               </div>
               <div>
                  <img :src="mSurfaceImg(item.surfaceImg)" style="height: 120px;">
               </div>
               <div style="height: 40px; line-height: 40px;">
                  <router-link :to="mBookDetail(item.id)">立即购买</router-link>&nbsp;
                  <a href="javascript:void(0)" @click="mAddShopping(item.bookCode)">加入购物车</a>
               </div>
            </div>
         </el-col>
      </el-row>
      <!--分页栏-->
      <el-row type="flex" justify="center">
         <el-pagination background :layout="pager.layout" :current-page="pager.pageIndex"
                        :page-size="pager.pageSize" :total="pager.rowCount"
                        @current-change="mPageIndexChange"></el-pagination>
      </el-row>
   </el-main>
</template>
<script>
import axiosUtil from "@/utils/axiosUtil";
import loginUtil from "@/utils/loginUtil";

export default {
   data() {
      return {
         //搜索条件
         search: {
            bookName: '',
            typeCode: '',
         },
         //表格数据
         table: {
            data: []
         },
         //表格分页
         pager: {
            pageIndex: 1,
            pageSize: 10,
            layout: 'total, prev, pager, next, jumper',
            rowCount: 0,
         },
         ddl: {
            typeCodeDdl: [],
         }
      }
   },
   methods: {
      //搜索数据
      mSearchData() {
         axiosUtil.get({
            url: '/bookInfo/getTable',
            data: {
               ...this.search,
               pageIndex: this.pager.pageIndex,
               pageSize: this.pager.pageSize
            },
            success: res => {
               this.table.data = res.data.table;
               this.pager = res.data.pager;
            }
         })
      },
      //换页切换
      mPageIndexChange(val) {
         this.pager.pageIndex = val
         this.mSearchData()
      },
      //加入购物车
      mAddShopping(bookCode) {
         //检查是否已登录
         if (loginUtil.isUserLogin() == true) {
            axiosUtil.postForm({
               url: '/shopping/addShopping',
               data: {
                  bookCode: bookCode
               },
               success: res => {
                  this.$message.info('添加成功')
               }
            })
         } else {
            this.$message.info('请先登录')
            this.$router.push('/clientlogin')
         }

      },
      //图片路径
      mSurfaceImg(path) {
         return axiosUtil.baseUrl() + '/uploadDir/' + path;
      },
      //图书详情地址
      mBookDetail(id) {
         return "/client/bookinfo?id=" + id;
      }
   },
   created() {
      //获取图书类型
      axiosUtil.get({
         url: '/bookType/getTable',
         data: {
            pageIndex: 1,
            pageSize: 1000000,
         },
         success: res => {
            this.ddl.typeCodeDdl = res.data.table;
         }
      })
      //搜索图书
      this.mSearchData();
   }
}
</script>
<style scoped>
.center {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
}

.center .book {
   text-align: center;
   width: 220px;
   border: 1px solid #ebebeb;
   margin-right: 10px;
   margin-bottom: 10px;
}

a:link, a:visited, a:hover, a:active {
   text-decoration: none;
   color: black;
   font-size: 13pt;
}
</style>
